<template>
    <div id="tmpl">
        <mt-swipe class="pro-swipe">
            <mt-swipe-item v-for="item in LunbotuList">
                <router-link :to="item.url"><img v-bind:src="item.img"></router-link>
            </mt-swipe-item>
        </mt-swipe>
        <div class="pro-info">
            <div class="protit">{{proobj.protit}}</div>
            <div class="proprice">
                <span>市场价：<em>{{proobj.marketprice}}</em></span>
                <span>网售价：<em>{{proobj.networkprice}}</em></span>
                <span class="red">专属价：<em>{{proobj.exclusiveprice}}</em></span>
                <span class="red">销量：<em>{{proobj.protit}}</em></span>
            </div>
        </div>
        <div class="nav">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">图文介绍</mt-tab-item>
                <mt-tab-item id="2">全网比价</mt-tab-item>
                <mt-tab-item id="3">用户评价</mt-tab-item>
            </mt-navbar>
            <div class="page-tab-container">
                <!-- tab-container -->
                <mt-tab-container v-model="selected">
                    <mt-tab-container-item id="1">
                        <p v-for="item in LunbotuList"><img :src="item.img"></p>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2">

                    </mt-tab-container-item>
                    <mt-tab-container-item id="3">

                    </mt-tab-container-item>
                </mt-tab-container>
            </div>
        </div>
        <div class="bottom-pay flex">
            <div class="left flex">
                <router-link class="cart-icon" to="/cart">
                    <i></i>
                    购物车
                </router-link>
                <div class="collect-icon">
                    <i></i>
                    收藏
                </div>
            </div>
            <div class="right flex">
                <div class="add-cart" @click="popupVisible = !popupVisible;skusprices();btntype=0">
                    加入购物车
                </div>
                <div class="buy-btn" @click="popupVisible = !popupVisible;skusprices();btntype=1">
                    立即购买
                </div>
            </div>
        </div>
        <mt-popup class="sku-box" v-model="popupVisible" position="bottom">
            <!--规格显示选择-->
            <div class="sku-box">
                <div class="sku-top-box">
                    <div class="sku-tt flex">
                        <div class="pro-sku-img">
                            <img :src="proobj.main_img">
                        </div>
                        <div class="pro-sku-tit">
                            <p class="tit">{{proobj.protit}}</p>
                            <p class="price">￥<em>{{skuprice}}</em>元</p>
                        </div>
                    </div>
                    <div class="sku-list">
                        <ul>
                            <li v-for="(item,parentindex) in proobj.spec_attr_list" :key="parentindex">
                                <div class="sku-name">
                                    {{item.spec_name}}
                                </div>
                                <div class="sku-attrs">
                                    <span @click="selectsku(parentindex,index)"
                                          :class="{ 'on': item.selected_prop_value === index}"
                                           v-for="(skuitem,index) in item.spec_val"
                                           :key="index">
                                        {{skuitem}}
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="pro-amount-con">
                        <label>购买数量：</label>
                        <div class="pro_amount amount">
                            <span class="decrease disable" @click="decrease()"><i class="disable"></i></span>
                            <input class="num" id="buyNum" v-model="num" type="number">
                            <span class="increase" @click="increase()"><i class=""></i></span>
                        </div>
                    </div>

                </div>
                <div class="sku-submit" @click="submit()">
                    确认
                </div>
            </div>

        </mt-popup>
    </div>
</template>
<script>
    import Vue from "vue"
    import {Navbar, TabItem, TabContainer, TabContainerItem, Popup, Toast} from 'mint-ui';

    Vue.component(Popup.name, Popup);
    Vue.component(Navbar.name, Navbar);
    Vue.component(TabItem.name, TabItem);
    Vue.component(TabContainer.name, TabContainer);
    Vue.component(TabContainerItem.name, TabContainerItem);

    export default {
        name: 'page-tab-container',
        data() {
            return {
                id: this.$route.params.id,//获取到路由过来的id值 
                proobj: {},//商品对象
                LunbotuList: [],
                current: 0,
                skuprice: 0,//选中sku后的价格
                skuid:0,
                num: 1,//数量
                isDisable: true,//是否可以点击
                selected: '1',//选项卡选中的结果
                selectspec: "",//获得选中的属性拼接成的字符  例如：红色,500ml,非转基因压榨
                popupVisible: false,
                btntype: 0//0表示是购物车1表示立即下单
            }
        },
        created() {
            this.gerProdetail();
        },
        methods: {
            //获取数据
            gerProdetail() {
            //   this.$http.get("../src/components/prodetail.json"+this.id).then( result => {
                this.$http.get("../src/data/prodetail.json").then(result => {
                    this.LunbotuList = result.body.data[0].detail_img;
                    this.proobj = result.body.data[0];
                });
            },
            //点击sku时样式变化
            selectsku(groupIndex, propIndex) {
                this.proobj.spec_attr_list[groupIndex].selected_prop_value = propIndex;
                this.skusprices();
            },
            //遍历选中的sku的组合，来判断显示价格
            skusprices() {
                //遍历拼装选中的属性存到selectspec中
                this.selectspec = "";//选中的一组sku  如this.selectspec="黄色,500ml,非转基因压榨"
                for (var i = 0; i < this.proobj.spec_attr_list.length; i++) {
                    var selected_sku_index = this.proobj.spec_attr_list[i].selected_prop_value;
                    if (i < this.proobj.spec_attr_list.length - 1) {
                        this.selectspec += this.proobj.spec_attr_list[i].spec_val[selected_sku_index] + ","
                    } else {
                        this.selectspec += this.proobj.spec_attr_list[i].spec_val[selected_sku_index]
                    }
                }
                //判断不同的sku并有库存的商品价格
                for (var j = 0; j < this.proobj.sku_list.length; j++) {
                    if (this.selectspec == this.proobj.sku_list[j].spec_item) {
                        this.skuprice = this.proobj.sku_list[j].zs_price;
                        this.skuid = this.proobj.sku_list[j].sku_id;
                        return
                    } else {
                        this.skuprice = "库存不足";
                    }
                }
            },
            //购买数量增加
            increase() {
                this.num++;
                this.isDisable = true;
            },
            //购买数量减少
            decrease() {
                if (this.isDisable) {
                    if (this.num < 2) {
                        this.isDisable = false;
                    } else {
                        this.num--;
                        this.isDisable = true;
                    }
                }
            },
            //提交
            submit() {
                if (this.btntype) {
                    console.log("立即购买")
                } else {
                    if(this.skuprice == 0){
                        console.log("库存不足")
                    }else{
                        this.addcart();
                        this.popupVisible=false;
                        alert("添加成功")
                    }
                }
            },
//            购物车
            addcart(){
                var goodsinfo={
                    id:this.id,
                    count:this.num,
                    price:this.skuprice,
                    skuid:this.skuid,
                    selected:true
                };
                this.$store.commit("addToCar",goodsinfo);
            }
        }
    }
</script>
<style scoped>
    .pro-info {
        background: #fff;
        padding: .75rem;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: .35rem;
    }

    .red {
        color: #d1181d
    }

    .proprice span {
        display: block;
        padding: .25rem 0;
    }

    .nav {
        border-top: 1px solid #e5e5e5;
    }

    .mint-navbar a {
        color: #333;
    }

    .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 3px solid #d1181d;
        color: #d1181d;
        margin-bottom: 0;
    }
    .cart-icon{
        display:block;
        color:#333;
        width: 50%;
        text-align: center;
        height: 2.5rem;
        line-height: 1rem;
    }
</style>